import { useFetch, type UseFetchOptions } from '@vueuse/core';

export function useCustomFetch<T>(
    url: string,
    options: UseFetchOptions = {}
) {
    // 添加全局拦截器
    const globalOptions: UseFetchOptions = {
        // 请求拦截器
        beforeFetch(ctx) {
            console.log('请求拦截器 - 请求前', ctx);
            // 添加全局 header
            ctx.options.headers = {
                ...ctx.options.headers,
                Authorization: `Bearer ${localStorage.getItem('token') || ''}`,
            };
            return ctx;
        },
        // 相应拦截器
        afterFetch(ctx) {
            console.log('响应拦截器 - 成功响应', ctx);
            // 可以对响应数据进行全局处理
            if (!ctx.response.ok) {
                throw new Error(`HTTP error! status: ${ctx.response.status}`);
            }
            return ctx;
        },
        // 错误拦截器
        onFetchError(ctx) {
            console.error('错误处理 - 捕获到错误', ctx.error);
            // 全局错误处理逻辑
            // 显示错误信息
            console.log('ctx', ctx);
            const message = ctx.response?.status
                ? `请求失败，状态码: ${ctx.response.status}`
                : '网络连接异常';
            return ctx;
        },
    };

    // 合并全局配置与传入的 options
    const mergedOptions = { ...globalOptions, ...options };

    // 使用合并后的配置调用 useFetch
    return useFetch<T>(url, mergedOptions);
}

// 使用示例
// const { data, error, execute } = useCustomFetch('https://api.example.com/data');